<template>
    <div id="PathPlan">
        <div class="divisionDiv" style="margin-bottom:10px">
            <img src="../../assets/img/division.png"/>
        </div>
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <img src="../../assets/img/起点.png"/>起点
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <img src="../../assets/img/途径点.png"/>途经
                </div>
            </el-col>
        </el-row>
          <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <img src="../../assets/img/障碍点.png"/>障碍
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <img src="../../assets/img/终点.png"/>终点
                </div>
            </el-col>
        </el-row>
        <div class="divisionDiv" style="margin-top:10px;margin-bottom:10px">
            <img src="../../assets/img/division.png"/>
        </div>
        <el-form ref="form" label-width="50px">
            <el-form-item label="起点">
                <el-input></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark" align="center">
                         <img src="../../assets/img/途径点.png"/>途经
                    </div>
                </el-col>
            </el-row>
            <el-form-item label="终点">
                <el-input></el-input>
            </el-form-item>
            
            <div class="u-pathplanbtn">
                <el-button type="primary">清除</el-button>
                <el-button type="primary">规划</el-button>
            </div>
        </el-form>
        
        <!-- <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="专题图层1" name="1">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层2" name="2">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层3" name="3">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="专题图层4" name="4">
                <ul class="list-group">
                    <li class="list-group-item">
                        <el-switch v-model="value3"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                    <li class="list-group-item">
                        <el-switch v-model="value4"></el-switch>天地图
                    </li>
                </ul>
            </el-collapse-item>
        </el-collapse> -->
    </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: '1',
        value3: true,
        value4: true
      };
    }
  }
</script>

<style>
    #PathPlan
      {
          position:relative;
          height: 100%;
          /* top: 30px;
          left: 64px; */
          z-index:999;
      }

      #PathPlan .divisionDiv{
          height: 30px;
      }
      #PathPlan .divisionDiv>img{
            height: 100%;
            float: right;
      }
      .el-collapse-item{
          width: 100%;
      }

      .el-collapse-item__content{
        padding-bottom: 0px;
      }

      .list-group-item{
        border:0px;
        padding-bottom: 2px;
        padding: 0.7rem 0.5rem;
     }
      .el-switch{
        padding:10px;  
     }

      .bg-purple {
        background:white;
     }
      .bg-purple-light {
        background: white;
     }

     #PathPlan .grid-content {
        border-radius: 0px;
        min-height: 35px;
     }

     #PathPlan .grid-content img{
        width: 28px;
        height: 28px;
        margin-left: 15px;
        margin-top: 6px;
        margin-bottom: 6px; 
        margin-right: 10px;
     }

     #PathPlan .el-input__inner{
         border-radius: 0px;
         width: 90%
     }

     #PathPlan .el-form-item{
         margin-bottom: 0px;
     }

     #PathPlan .u-pathplanbtn{
         margin-left: 20px;
         margin-top: 50px;
     }

    #PathPlan .el-button {
         margin-left: 20px;
         margin-right: 32px;
     }

    #PathPlan .el-button span{
        color: white;
    }
     
</style>

